<template>
    <div class="pre-history-box">
        <div class="pre-history-list">
            <template v-if="perscriptionList.length != 0">
                <div class="list-box" v-for="(item, index) in perscriptionList" :key="index">
                    <div class="flex-right">
                        <p>处方单号：{{item.prescriptionNo}}</p>
                        <div>
                            <p>开方医生：{{item.doctorName}}</p>
                            <p>开科科室：{{item.departmentName}}</p>
                            <p>问诊类型：{{item.relationType}}</p>
                            <p>{{item.createTime}}</p>
                        </div>
                    </div>
                    <div class="flex-left">
                        <p>参考价格：{{item.prescriptionPrice}}元</p>
                        <div>
                            <el-button round @click="viewPre(item.id)">查看处方</el-button>
                        </div>
                    </div>
                </div>
            </template>
            <div v-else style="margin-top: 150px">
                <empty></empty>
            </div>
        </div>
        <div class="pagination-box">
            <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="total">
            </el-pagination>
        </div>
        <pdf-dialog ref="pdfDialog"></pdf-dialog>
    </div>
</template>

<script>
    import pdfDialog from '@/components/chatroom/view-pdf';
    import empty from '@/components/nodata/index'
    export default {
        name: 'prescriptionHistory',
        components: {
            pdfDialog,
            empty
        },
        props: {
            readState: {
                type: String,
                default: ''
            },
            queryTime: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                perscriptionList: [],
                total: 0,
                current: 1,
            }
        },
        mounted() {
            this.getPatientPrescriptionList()
        },
        methods: {
            currentChange(e) {
                // console.log(e)
                this.current = e;
                this.getPatientPrescriptionList();
            },
            viewPre(e) {
                let params = {
                    id: e,
                    resource: 4
                };

                this.$refs.pdfDialog && this.$refs.pdfDialog.onOpen(params);
            },
            getPatientPrescriptionList() {
                let params = {
                    current: this.current,
                    size: 10,
                    startTime: this.queryTime ? this.queryTime[0] : '',
                    endTime: this.queryTime ? this.queryTime[1] : '',
                    readState: this.readState
                }

                this.$ajax.getPatientPrescriptionList(params).then(res => {
                    this.perscriptionList = res.data.list;
                    this.total = res.data.total;
                }).catch(err => {
                    this.$util.message(err.msg, 'error')
                })
            }
        }
    }
</script>

<style lang='scss'>
    .pre-history-list {
        height: 700px;
        overflow-y: auto;
    }

    .list-box {
        display: flex;
        font-size: 16px;
        color: #535353;
        justify-content: space-between;
        padding-bottom: 30px;
        padding-right: 15px;
        margin-bottom: 30px;
        border-bottom: 1px solid #dcdfe6;
    }

    .flex-right {
        width: 80%;

        >div {
            margin-top: 30px;
            display: flex;
            color: #757575;
            font-size: 14px;

            >p {
                width: 25%;
                justify-content: space-between;
            }
        }
    }

    .flex-left {
        >p {
            font-size: 14px;
        }

        >div {
            margin-top: 20px;

            /deep/ .el-button.is-round {
                font-size: 14px;
                height: 34px;
                width: 85px;
                padding: 0;
                border-color: #006db8;
                color: #006db8;
            }
        }
    }

    .pre-history-box {
        position: relative;

        .pagination-box {
            text-align: right;
        }
    }
</style>